<%--
  Created by IntelliJ IDEA.
  User: 95344
  Date: 2025/10/19
  Time: 19:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>添加会议室信息</title><!-- 引入jQuery-1.12.4，匹配文档中环境要求，用于表单验证 -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>/* 界面美化，控件摆放整齐，符合文档“注意事项”中界面美观要求 /
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
background-color: #f5f7fa;
margin: 0;
padding: 30px 0;
}
#title {
color: #333;
text-align: center;
margin-bottom: 30px;
font-size: 24px;
font-weight: 600;
}
table {
background-color: white;
margin: 0 auto;
padding: 35px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-collapse: separate;
border-spacing: 12px;
}
td {
color: #666;
font-size: 14px;
vertical-align: middle;
}
/ 输入框样式统一，提升交互体验 /
input[type="text"], input[type="number"] {
width: 280px;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
transition: border-color 0.3s ease;
}
input[type="text"]:focus, input[type="number"]:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64,158,255,0.1);
}
/ 单选按钮样式调整，确保选项清晰 /
input[type="radio"] {
margin: 0 8px 0 20px;
vertical-align: middle;
}
input[type="radio"]:first-child {
margin-left: 0;
}
/ 功能按钮样式区分，提升操作辨识度 */
    #addBtn, input[type="reset"] {
        padding: 10px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }

    #addBtn {
        background-color: #409eff;
        color: white;
        margin-right: 20px;
    }

    #addBtn:hover {
        background-color: #3086d6;
    }

    input[type="reset"] {
        background-color: #f5f5f5;
        color: #666;
    }

    input[type="reset"]:hover {
        background-color: #eee;
    }</style>

</head>
<body><%// 接收添加操作反馈信息，添加成功/失败均弹出提示（匹配文档图-6及失败提示要求）String addFeedback = (String) request.getAttribute("addMeetingRoomFeedback");if (addFeedback != null && !addFeedback.isEmpty()) {out.print("<script>alert('" + addFeedback + "');</script>");}%>
<h1 id="title">添加会议室信息</h1>
<form action="${pageContext.request.contextPath}/addRoom" method="post">
    <table>
        <tr>
            <td>会议室名称：</td>
            <td><input type="text" name="name" id="name" placeholder="请输入会议室名称" required></td>
        </tr>
        <tr>
            <td>容纳人数：</td>
            <td><input type="number" name="number" id="number" placeholder="请输入大于0的数字" ></td>
        </tr>
        <tr>
            <td>所属部门：</td>
            <td><input type="text" name="dept" id="dept" placeholder="请输入所属部门"></td>
        </tr>
        <tr>
            <td>会议室地址：</td>
            <td><input type="text" name="local" id="local" placeholder="可选，如：5楼501"></td>
        </tr>
        <tr>
            <td>会议室状态：</td>
            <td><input type="radio" name="state" value="1" checked>已预约<input type="radio" name="state" value="2">使用中<input
                    type="radio" name="state" value="3">空闲中
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" value="新增" id="addBtn"><input type="reset" value="重置"></td>
        </tr>
    </table>
</form>
<script>
    var addBtn = document.getElementById("addBtn");
    addBtn.addEventListener("click",(e)=>{
        var name = document.getElementById("name")
        var number = document.getElementById("number");
        var dept = document.getElementById("dept")
        if (!name.value){
            alert("会议名称不能为空！");
            return;
        }
        if(number.value<=0){
            alert("容纳人数必须大于0")
            return;
        }
        if (!dept.value){
            alert("所属部门不能为空！")
            return;
        }
        document.querySelector("form").submit();
    });
</script>
</body>
</html>
